<template>

	<view>

		<cu-custom isBack="true" :bgColor="'bg-'+$themeColor()">
			<block slot="backText">返回</block>
			<block slot="content">问题清单(龙华、坪山)</block>
		</cu-custom>

		<view :class="'bg-'+$bgColor()">
			<form @submit="formSubmit">
				<input name="id" :value="data.id" style="display: none;" />
				<input name="questionId" :value="data.questionId" style="display: none;" />
				<view class="cu-form-group ">
					<view class="title">区域:</view>
					<input name="region" :value="data.region" style="display: none;"></input>
					
					<picker @change="regionPickerChange" :value="regionPickerIndex" :range="regionPicker">
						<view class="picker">
							{{regionPickerIndex>-1?regionPicker[regionPickerIndex]:data.region}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group ">
					<view class="title" >第几次:</view>
					<input name="timeName" :value="data.timeName" ></input>
				</view>
				<view class="cu-form-group ">
					<view class="title">问题类别:</view>
					<input name="questionCategory" :value="data.questionCategory" ></input>
				</view>
				<view class="cu-form-group ">
					<view class="title">所属工程:</view>
					<input name="belongProject" :value="data.belongProject" ></input>
				</view>
				<view class="cu-form-group ">
					<view class="title">小区名称:</view>
					<input name="areaName" :value="data.areaName" ></input>
				</view>
				<view class="cu-form-group ">
					<view class="title">所属街道:</view>
					<input name="belongStreet" :value="data.belongStreet" ></input>
				</view>
				<view class="cu-form-group ">
					<view class="title">检查日期:</view>
					<input name="checkDate" :value="data.checkDate" style="display: none;"></input>
					<picker mode="date" :value="data.checkDate" start="2015-09-01" end="2120-01-01" @change="DateChange">
						<view class="picker">
							{{$formatDate(data.checkDate) != ''  ? $formatDate(data.checkDate):'请选择'}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group ">
					<view class="title">问题类型:</view>
					<input name="questionType" :value="data.questionType" ></input>
				</view>
				<view class="cu-form-group ">
					<view class="title">问题描述:</view>
					<input name="questionDesc" :value="data.questionDesc" ></input>
				</view>
				<view class="cu-form-group ">
					<view class="title" >现场图片:</view>
					<view class="grid col-4 grid-square flex-sub">
						<input name="scenePicture" :value="data.scenePicture"  style="display: none;"></input>
						<image style="width: 120px; height: 120px;" :src="scenePictureImg==''? $api+'/system/file/getProjectPicture/'+data.scenePictureBase64:scenePictureImg" @tap="ViewImage2"  mode="aspectFill" :data-src="scenePictureImg==''? $api+'/system/file/getProjectPicture/'+data.scenePictureBase64:scenePictureImg"></image>
					</view>
					
					<view class="grid col-4 grid-square flex-sub">
						<view class="solids" @tap="scenePictureChooseImage" >
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
				<view class="cu-form-group ">
					<view class="title">整改情况:</view>
					<input name="rectification" :value="data.rectification" ></input>
				</view>
				<view class="cu-form-group ">
					<view class="title" >整改图片:</view>
					<view class="grid col-4 grid-square flex-sub">
						<input name="rectificationPicture" :value="data.rectificationPicture"  style="display: none;"></input>
						<image style="width: 120px; height: 120px;" :src="rectificationPictureImg==''? $api+'/system/file/getProjectPicture/'+data.rectificationPictureBase64:rectificationPictureImg" @tap="ViewImage2"  mode="aspectFill" :data-src="rectificationPictureImg==''? $api+'/system/file/getProjectPicture/'+data.rectificationPictureBase64:rectificationPictureImg"></image>
					
					</view>
					
					<view class="grid col-4 grid-square flex-sub">
						<view class="solids" @tap="rectificationPictureChooseImage" >
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
				<view class="cu-form-group ">
					<view class="title">是否整改:</view>
					<input name="rectificationState" :value="data.rectificationState" style="display: none;"></input>
					<switch @change="SwitchRectificationState" :class="data.rectificationState=='是'?'checked':''" :checked="data.rectificationState=='是'?true:false"></switch>
				</view> 
				<view class="cu-form-group ">
					<view class="title">复查日期:</view>
					<input name="reviewDate" :value="data.reviewDate" style="display: none;"></input>
					<picker mode="date" :value="data.reviewDate" start="2015-09-01" end="2120-01-01" @change="reviewDateChange">
						<view class="picker">
							{{$formatDate(data.reviewDate) != ''  ? $formatDate(data.reviewDate):'请选择'}}
						</view>
					</picker>
				</view>
				
				
				<view class="padding flex flex-direction">
					<button form-type="submit" class="cu-btn bg-blue margin-tb-sm lg" :disabled="submiting">提交</button>
				</view>
			</form>
		</view>

	</view>
</template>

<script>
	var content = null;
	var touchs = [];
	var canvasw = 0;
	var canvash = 0;
	var _that;
	//获取系统信息
	uni.getSystemInfo({
		success: function(res) {
			canvasw = res.windowWidth;
			canvash = res.windowHeight;
		},
	})
	export default {
		data() {
			return {
				id: '',
				troubleId: '',
				data: '',
				submiting:false,
				regionPicker:[],
				regionPickerIndex:-1,
				scenePictureImg:'',
				rectificationPictureImg:''
			}
		},
		onLoad: function(opt) {
			this.troubleId = opt.troubleId;
			// 获取项目数据
			this.getProjectInfo(this.troubleId);
			
			// 获取区域信息
			this.getRegion();
		},
		mounted() {
			// 初始化加载

		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.req();
			},
			req() {
				var param = {
					"projectName": this.searchVal,
					"district": this.district,
					"pageSize": this.pageSize,
					"pageNum": this.pageNum
				}
			},
			getProjectInfo(troubleId) {
				this.$httpGet('/system/trouble/getTroubleById/' + troubleId, null).then(res => {
					this.data = res.data.data;
				})
			},
			scenePictureChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album'], //从相册选择
					sourceType: ['拍照', '相册', '拍照或相册'],
					success: (res) => {
						this.scenePictureImg = res.tempFilePaths[0]
					},
					fail: (err) => {
						// #ifdef APP-PLUS
						if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
							this.checkPermission(err.code);
						}
						// #endif
						// #ifdef MP
						uni.getSetting({
							success: (res) => {
								let authStatus = false;
								switch (this.sourceTypeIndex) {
									case 0:
										authStatus = res.authSetting['scope.camera'];
										break;
									case 1:
										authStatus = res.authSetting['scope.album'];
										break;
									case 2:
										authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera'];
										break;
									default:
										break;
								}
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				});
			},
			rectificationPictureChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album'], //从相册选择
					sourceType: ['拍照', '相册', '拍照或相册'],
					success: (res) => {
						this.rectificationPictureImg = res.tempFilePaths[0]
					},
					fail: (err) => {
						// #ifdef APP-PLUS
						if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
							this.checkPermission(err.code);
						}
						// #endif
						// #ifdef MP
						uni.getSetting({
							success: (res) => {
								let authStatus = false;
								switch (this.sourceTypeIndex) {
									case 0:
										authStatus = res.authSetting['scope.camera'];
										break;
									case 1:
										authStatus = res.authSetting['scope.album'];
										break;
									case 2:
										authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera'];
										break;
									default:
										break;
								}
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				});
			},
			ViewImage2(e) {
				var current = e.target.dataset.src
				// console.log(current)
				var imgs=[current];
				uni.previewImage({
					current: current,
					urls: imgs
				})
			},
			
			regionPickerChange(e){
				this.regionPickerIndex = e.detail.value
				this.data.region = this.regionPicker[this.regionPickerIndex]
			},
			getRegion(){
				var dictData = {dictType:'zbqy_region'}
				this.$httpPost('/system/dict/data/list' , dictData).then(res => {
					// this.data = res.data.data
					var array = res.data.rows;
					var regionPicker = [];
					for (var i = 0; i < array.length; i++) {  
						// console.log(array[i].dictValue);  
						regionPicker.push(array[i].dictValue)
					}
					this.regionPicker = regionPicker;
				})
			},
			DateChange(e) {
				this.data.checkDate = e.detail.value
			},
			reviewDateChange(e) {
				this.data.reviewDate = e.detail.value
			},
			SwitchRectificationState(e) {
				this.data.rectificationState = e.detail.value?'是':'否';
			},
			formSubmit(e){
				this.submiting = true;
				
				var formData = e.detail.value;
				// this.$httpPost('/system/question/edit' , formData).then(res => {
				// 	console.log(res);
				// 	this.$msg(res.data.msg);
				// })
				var formData = e.detail.value;
				let imgs = []
				imgs.push({name:"positionPictureImg",uri:this.positionPictureImg})
				imgs.push({name:"scenePictureImg",uri:this.scenePictureImg})
				imgs.push({name:"rectificationPictureImg",uri:this.rectificationPictureImg})
				
				
				uni.uploadFile({
				    url: this.$api+'/system/trouble/uploadTroubleFile',
				    files: imgs,
				    formData: formData,
				    header:{"Content-Type": "multipart/form-data"},
				    success: (res) => {
				        console.log(res);
						this.$msg('提交成功')
						setTimeout(() => {
							uni.switchTab({
								url:"index",
								success() {
									let page = getCurrentPages().pop();
									if (!page) return; 
									page.onLoad();
								}
							})
						}, 1000);
						
				    },
					fail:function(){
						this.$msg('提交失败')
						this.submiting=false;
					}
				})
				
				this.submiting = false;
				
			},
			isNull(e) {
				if (e != null) {
					return e;
				}
				return "";
			}

		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 10px);
		text-align: right;
	}

	canvas {
		background-color: #DDDDDD;
		width: 700upx;
		margin: 0 25upx;
		height: calc(30vh - 10upx);
	}
</style>
